<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>猫名 - 前后缀查询</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <header class="glass-header">
            <h1>猫名生成器</h1>
            <p>前缀/后缀三语言对照查询</p>
        </header>

        <div class="search-container">
            <div class="search-box">
                <input type="text" id="searchInput" placeholder="输入关键词搜索..." class="search-input">
                <div class="search-type">
                    <label class="radio-label">
                        <input type="radio" name="type" value="prefix" checked>
                        <span class="radio-text">前缀</span>
                    </label>
                    <label class="radio-label">
                        <input type="radio" name="type" value="suffix">
                        <span class="radio-text">后缀</span>
                    </label>
                </div>
            </div>
            <button id="randomBtn" class="glow-button">随机生成</button>
        </div>

        <div class="results-container">
            <div class="results-header">
                <div class="col">简体中文</div>
                <div class="col">繁體中文</div>
                <div class="col">English</div>
            </div>
            <div id="searchResults" class="results-body">
                <!-- 搜索结果将在这里动态显示 -->
            </div>
        </div>
    </div>

    <!-- 加载数据文件 -->
    <script>
      // 按顺序加载语言文件并避免变量冲突
      function loadLangScript(src, varName) {
        return new Promise((resolve) => {
          const script = document.createElement('script');
          script.textContent = `(function(){ ${document.currentScript.textContent} window.${varName} = data; })();`;
          script.src = src;
          script.onload = resolve;
          document.head.appendChild(script);
        });
      }

      (async function() {
        await loadLangScript('../data/zh-cn.js', 'zhCNData');
        await loadLangScript('../data/zh-tw.js', 'zhTWData');
        await loadLangScript('../data/en.js', 'enData');
        
        // 所有语言文件加载完成后加载主脚本
        const mainScript = document.createElement('script');
        mainScript.src = './script.js';
        document.head.appendChild(mainScript);
      })();
    </script>
</body>
</html>